<template>
	<view class="l-barrage">
		<view v-for="(item, index) in items" :key="index">
			<!-- #ifdef H5 -->
			<view v-if="item.display" class="aon" :style="{ top: `${item.top}%`, color: item.color }">
				<image class="avatar cu-avatar round" :src="item.pic" mode="aspectFit"></image>
				<text>{{ item.text }}</text>
			</view>
			<!-- #endif -->

			<!-- #ifndef H5 -->
			<view v-if="item.display" class="aon" :style="{ top: `${item.top}%`, color: item.color, animation: `mymove ${Number(item.time)}s linear forwards` }">
				<image class="avatar cu-avatar  round" :src="item.pic" ></image>
				<text>{{ item.text }}</text> 
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
let cycle;

// 弹幕字体颜色
function getRandomColor() {
	let rgb = [];
	for (let i = 0; i < 3; ++i) {
		let color = Math.floor(Math.random() * 256).toString(16);
		color = color.length == 1 ? '0' + color : color;
		rgb.push(color);
	}
	return '#' + rgb.join('');
}

export default {
	name: 'l-barrage',
	props: {
		minTime: {
			type: Number,
			default: 5
		},
		maxTime: {
			type: Number,
			default: 20
		},
		minTop: {
			type: Number,
			default: 4
		},
		maxTop: {
			type: Number,
			default: 50
		}
	},
	data() {
		return {
			items: [],
			linesNum:0,//总弹道数量
			currentLine:1//当前弹道
		};
	},
	methods: {
		add(obj) {
			//text = '', time = Math.ceil(Math.floor(Math.random() * (this.maxTime - this.minTime + 1) + this.minTime))
			
			var top=this.minTop+ this.currentLine*7
			this.items.push(
				Object.assign(
					{ 
						top: top,
						color: getRandomColor(),
						display: 1
					},
					obj
				)
			);
		    this.currentLine=this.currentLine+1
			if(this.currentLine>this.linesNum)this.currentLine=1
		},
		calLines(){
			this.linesNum=Math.ceil((this.maxTop - this.minTop)/7)
		},
		start(items = []) {
			this.calLines()
			this.items = [];
			cycle && clearInterval(cycle);
			let i = 0,
				len = items.length;

			cycle = setInterval(() => {
				let time = 5;
				// #ifndef H5
				time = Math.ceil(Math.floor(Math.random() * (this.maxTime - this.minTime + 1) + this.minTime));
				// #endif

				if (i < len) {
					var item = items[i];
					item.time = time;
					this.add(item);
					i++;
				} else {
					clearInterval(cycle);
					setTimeout(() => {
						this.$emit('end', {});
					}, time * 1000);
				}
			}, 500);
		}
	}
};
</script>

<style>
.aon {
	display: flex;
	align-items:center;
	position: fixed;
	white-space: nowrap;
	animation: mymove 15s linear forwards;
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	animation-fill-mode: forwards;
}
.l-barrage {
	z-index: 8;
	width: 100%;
	position: absolute;
}

@keyframes mymove {
	from {
		left: 100%;
	}
	to {
		left: -200%;
	}
}

@-moz-keyframes mymove /* Firefox */ {
	from {
		left: 100%;
	}
	to {
		left: -200%;
	}
}

@-webkit-keyframes mymove /* Safari and Chrome */ {
	from {
		left: 100%;
	}
	to {
		left: -200%;
	}
}

@-o-keyframes mymove /* Opera */ {
	from {
		left: 100%;
	}
	to {
		left: -200%;
	}
}

.avatar {
	display: inline-block;
	width: 50rpx;
	height: 50rpx;	
	margin-right: 8rpx;
	border: 0;
	border-radius:50rpx;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	overflow: hidden;
}
</style>
